<template>
	<view class='recommend'>
		<view class="system-height" :style="{ height: statusBarHeight }"></view>
		<view class="container">
			<view class="results-grid">
				<view class="result-item" v-for="(result, index) in lotteryResults" :key="index">
					<view class="result-header">
						<text class="lottery-name">{{ result.name }}</text>
						<text class="period">第 {{ result.period }} 期 开奖号码</text>
					</view>

					<view class="numbers">
						<view class="number" v-for="(num, idx) in result.numbers" :key="idx">
							{{ num }}
						</view>
					</view>
				</view>
			</view>
		</view>
		<pageFooter></pageFooter>
	</view>
</template>

<script>
import {
	mapGetters
} from "vuex";
import animationType from '@/utils/animationType.js'
import {
	getProductHot
} from '@/api/product.js';
import {
	getblindBoxList
} from '@/api/new.js';
import WaterfallsFlow from '@/components/WaterfallsFlow/WaterfallsFlow.vue';
import WaterfallsFlowItem from '@/components/WaterfallsFlowItem/WaterfallsFlowItem.vue';
import TitleBox from '@/components/titleBox/index.vue';
import pageFooter from "@/components/pageFooter/index.vue";
let statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
let app = getApp();
export default {
	name: 'recommend',
	computed: mapGetters(['uid']),
	components: {
		WaterfallsFlow,
		TitleBox,
		pageFooter,
	},
	props: {
		categoryId: {
			type: Number,
			default: function () {
				return 0;
			}
		},
		//是否显示头部
		isShowTitle: {
			type: Boolean,
			default: function () {
				return true;
			}
		},
		//是否使用本页面的请求数据
		isDefault: {
			type: Boolean,
			default: function () {
				return true;
			}
		},
		//使用的页面中调用数据传来的商品列表，isDefault为false时使用
		recommendList: {
			type: Array,
			default: function () {
				return [];
			}
		}
	},
	data() {
		return {
			urlDomain: this.$Cache.get("imgHost"),
			theme: app.globalData.theme,
			goodScroll: false,
			params: { //精品推荐分页
				page: 1,
				limit: 10,
				cid: 0
			},
			loading: false,
			tempArr: [],
			List: [],
			statusBarHeight: statusBarHeight,
			lotteryResults: [
				{ name: '澳门五分彩', period: '20250630212', numbers: ['6', '4', '1', '6', '9'] },
				{ name: '香港五分彩', period: '20250630212', numbers: ['1', '4', '1', '8', '2'] },
				{ name: '波兰五分彩', period: '20250630212', numbers: ['3', '7', '4', '5', '0'] },
				{ name: '河内三分彩', period: '20250630354', numbers: ['2', '5', '3', '0', '7'] },
				{ name: '河内五分彩', period: '20250630212', numbers: ['0', '2', '5', '5', '0'] },
				{ name: '印尼5分彩', period: '20250630212', numbers: ['4', '1', '2', '1', '1'] },
				{ name: '重庆时时彩', period: '20250630040', numbers: ['1', '1', '6', '9', '3'] },
				{ name: '江苏11选5', period: '20250630027', numbers: ['6', '10', '7', '2', '4'] },
				{ name: '山东11选5', period: '20250630027', numbers: ['4', '10', '3', '6', '5'] },
				{ name: '广东11选5', period: '20250630025', numbers: ['6', '9', '7', '5', '1'] },
				{ name: '江西11选5', period: '20250630025', numbers: ['4', '11', '9', '2', '1'] },
				{ name: '福彩3D', period: '2025170', numbers: ['4', '7', '5'] },
				{ name: '排列3', period: '2025170', numbers: ['5', '0', '2'] },
				{ name: '极速3D', period: '20250630212', numbers: ['9', '2', '1'] }
			]
		};
	},
	mounted() {
		// console.log("zjJSBridge",zjJSBridge)
		if (this.isDefault) {
			this.params.page = 1;
			this.goodScroll = false;
			this.tempArr = [];
			this.get_host_product()
			this.Getlist()
		} else {
			this.tempArr = this.recommendList
		};
	},
	methods: {
		Getlist: function () {
			this.loading = true
			getblindBoxList().then((res) => {
				this.List = res.data
				this.loading = false
			}).catch(err => {
				// this.loading = false
			});
		},


		// 跳转
		onstroll: function (item) {
			console.log(item)
			uni.navigateTo({
				url: `/pages/blind/index?id=${item.id}`
			})
		},
	},
	onReachBottom() {

	}
}
</script>

<style scoped lang="scss">
.container {
	background-color: #f5f5f5;
	min-height: 100vh;
	padding: 20rpx;
}

.results-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20rpx;
}

.result-item {
	background-color: white;
	border-radius: 15rpx;
	padding: 25rpx;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.result-header {
	margin-bottom: 20rpx;
}

.lottery-name {
	font-size: 28rpx;
	font-weight: bold;
	color: #333;
	display: block;
	margin-bottom: 8rpx;
}

.period {
	font-size: 22rpx;
	color: #999;
}

.numbers {
	display: flex;
	gap: 8rpx;
	flex-wrap: wrap;
}

.number {
	width: 50rpx;
	height: 50rpx;
	background-color: #e53e3e;
	color: white;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24rpx;
	font-weight: bold;
}
</style>
